<template>
	<div class="page">
		<!-- navbar -->
		<div class="navbar">
			<i class="Icon" style="color: #000000;font-size: 20px;" @click="backHandle()">arrow_back_ios_new</i>
			<div style="text-align: center;">Pay Page</div>
			<i class="Icon" style="color: #000000;font-size: 20px;opacity: 0;">arrow_back_ios_new</i>
		</div>
		<!-- body -->
		<div class="body">
			<h1>this is pay page</h1>
		</div>
		<van-button style="margin: 0 12px;margin-bottom: 12px;color: #FFFFFF;background-color: #74eb41;"
			@click="pagHandle">Pay</van-button>
	</div>
</template>

<script>
	export default {
		methods: {
			pagHandle() {
				localStorage.removeItem("shopcar")
				this.$router.push({
					path: "/payresult"
				})
			},
			backHandle() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style scoped>
	.page {
		flex: 1;
		height: 100vh;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
	}

	.navbar {
		height: 64px;
		padding: 0 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.body {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 12px;
	}
</style>
